<template>
  <PageLayout full>
    <template #header>
      <HeaderLayout show-back prevent-back :header-style="headerStyle" @back="onReset">
        <view>{{ $t('Dishwasher.ProgramDownload.PageTitle.Text') }}</view>
      </HeaderLayout>
    </template>
    <view class="programs-box">
      <view class="programsList" v-if="!downProgramsDetail">
        <view class="program-title">{{ $t('Dishwasher.ProgramDownload.ProgramList.Title.Text') }}</view>
        <view
          class="btnItem"
          :class="{ active: index == curIdx }"
          v-for="(item, index) in isVirtual ? tempDemoProgramLoadList : programs"
          :key="index"
          @click.stop="chooseProgram(item, index)"
        >
          <view class="btnItemCon">
            <view class="programName">
              <text>{{ language == 'en' ? item.title : item.name }}</text>
            </view>
          </view>
          <view v-if="item.status === 2" class="downloaded">{{ $t('APP.Common.Downloaded.Text') }}</view>
          <view v-if="item.status === 3" class="downFinishing down">{{ $t('APP.Common.Downloading.Text') }}</view>
          <view v-if="item.status === 4" class="downError down">{{ $t('APP.Common.DownloadFail.Text') }}</view>
        </view>
      </view>
      <view v-else class="downLoadDetailDiv">
        <image class="remoteSetImg" :src="imgUrL" mode="scaleToFill"></image>
        <view class="downProgramsDetail">
          <!-- 产品图片 -->
          <view class="prudctPicture" v-if="currentFeatureKey == BABYCARE">
            <image class="prudctImgBig prudctImgBig1" :src="imgUrl_Assets + 'baby_1.png'"></image>
            <image class="prudctImgBig prudctImgBig2" :src="imgUrl_Assets + 'baby_2.png'"></image>
            <image class="prudctImgBig prudctImgBig3" :src="imgUrl_Assets + 'baby_3.png'"></image>
            <image class="prudctImgBig prudctImgBig4" :src="imgUrl_Assets + 'baby_4.png'"></image>
          </view>
          <!-- baby care购买入口 -->
          <view
            class="baby-care-card"
            v-if="currentFeatureKey == BABYCARE && brand === 'SIEMENS' && currentStatus === 0"
          >
            <view class="left">
              <image class="card-img" :src="'/pages/appliance/static/ic_accessory.jpg'"></image>
              <view class="cont-card">
                <view class="card-name">{{ $t('Dishwasher.ProgramDownload.BabyCare.Card.Title.Text') }}</view>
              </view>
            </view>
            <TrackButton
              :track-id="'Dishwasher.ProgramDownload.BabyCare.Card.GoBuy.Button.Text'"
              :type="TrackType.ApplianceDetail"
            >
              <view class="card-btn" @click="goBuy">{{
                $t('Dishwasher.ProgramDownload.BabyCare.Card.GoBuy.Button.Text')
              }}</view>
            </TrackButton>
          </view>

          <!-- 程序 -->
          <view class="program">
            <view class="pageTitleDiv">
              <view class="pageTitle">{{ currentName }}</view>
              <view class="downFinished" v-if="currentStatus === 2">{{ $t('APP.Common.Downloaded.Text') }}</view>
            </view>
            <view class="pageDes">
              <view>{{ shortDescriptionTitle }}</view>
              <view v-for="(item, index) in shortDescriptionItems" :key="index" wx:key="index">
                <view>{{ item }}</view>
              </view>
            </view>
          </view>
          <!-- 技术数据 -->
          <view class="technicalData" v-if="technicalDataFlag">
            <view class="pageTitleSmall">{{
              $t('Dishwasher.ProgramDownload.ProgramDetail.TechnicalData.Title.Text')
            }}</view>
            <view class="pageDes">
              <view
                >{{ $t('Dishwasher.ProgramDownload.ProgramDetail.TechnicalData.Temperature.Label.Text') }}：{{
                  temperatureMax
                }}°C</view
              >
              <view
                >{{ $t('Dishwasher.ProgramDownload.ProgramDetail.TechnicalData.RunTime.Label.Text') }}：{{
                  runtimeTotal
                }}min</view
              >
              <view
                >{{ $t('Dishwasher.ProgramDownload.ProgramDetail.TechnicalData.UseWater.Label.Text') }}：{{
                  consumptionWater
                }}L</view
              >
              <view
                >{{ $t('Dishwasher.ProgramDownload.ProgramDetail.TechnicalData.EnergyUse.Label.Text') }}：{{
                  consumptionEnergy
                }}kWh</view
              >
            </view>
          </view>

          <!-- 注意 -->
          <view class="careEvent"
            >{{ $t('Dishwasher.ProgramDownload.ProgramDetail.TechnicalData.CareTips.Text') }}
          </view>
        </view>
      </view>
      <!-- 按钮 -->
      <view
        class="btnDiv"
        id="btnDiv"
        v-if="downProgramsDetail"
        :style="currentStatus === 1 || currentStatus === 0 ? '' : 'height:246rpx;'"
      >
        <view v-if="currentStatus === 1 || currentStatus === 0" class="agreeClaus">
          <view class="gressClauseDiv" @click="changeGressClause">
            <view class="agreeInput">
              <view class="gressClauseImage" v-if="isGressClauseFlag"></view>
            </view>
          </view>
          <view class="agreeFont" @click="changeGressClause">{{
            $t('Dishwasher.ProgramDownload.ProgramDetail.TechnicalData.ClauseAgree.Label.Text')
          }}</view>
          <view class="agreeClauseName" @click="seeClause">{{
            $t('Dishwasher.ProgramDownload.ProgramDetail.TechnicalData.ClauseName.Text')
          }}</view>
        </view>
        <!-- 下载 下载中 删除 置灰样式添加 grey-->
        <view>
          <TrackButton
            :track-id="'APP.Common.Download.Text'"
            :track-data="{ program_key: currentFeatureKey, program_name: currentName }"
            :type="TrackType.ApplianceDetail"
          >
            <view
              class="btn"
              :class="{ grey: !isGressClauseFlag }"
              @click="downloadProgramFun"
              v-if="currentStatus === 1 || currentStatus === 0"
              >{{ $t('APP.Common.Download.Text') }}</view
            >
          </TrackButton>
          <view class="btn-del-box" v-if="currentStatus === 2">
            <TrackButton
              :track-id="'APP.Common.Delete.Text'"
              :track-data="{ program_key: currentFeatureKey, program_name: currentName }"
              :type="TrackType.ApplianceDetail"
            >
              <view class="bth-del" @click="deleteBtn(true)">{{ $t('APP.Common.Delete.Text') }}</view></TrackButton
            >
            <view class="btn-start" @click="gotoStart">{{
              $t('Dishwasher.ProgramDownload.ProgramDetail.GotoStart.Button.Text')
            }}</view>
          </view>
          <view class="btn grey" v-if="currentStatus === 3 || currentStatus === 4">{{
            $t('APP.Common.Downloading.Text')
          }}</view>
        </view>
      </view>
    </view>
  </PageLayout>
  <Modal
    :visible="deleteProgramDiag"
    :title="$t('APP.Common.Reminder.Text')"
    :description="$t('Dishwasher.ProgramDownload.DeleteDialog.Text')"
    :cancel-text="$t('APP.Common.Cancel.Text')"
    :ok-text="$t('APP.Common.Delete.Text')"
    @ok="deleteProgram"
    @cancel="deleteBtn(false)"
  >
  </Modal>
</template>
<script setup lang="ts">
import PageLayout from '@/layout/page/page.vue'
import HeaderLayout from '@/layout/page/header.vue'
import Modal from '@/common/modal.vue'

import netconfig from '@/config/netconfig'
import { onLoad, onShow } from '@dcloudio/uni-app'
import {
  getDownloadablePrograms,
  type DishwasherDownPrograms,
  getDownloadableProgramsDetail,
  getProgramMetadata,
  delDownloadProgram,
  getSingleProgramsAddEd,
  downloadProgram,
  selectProgram,
} from '@/api/appliance'
import { useI18n } from 'vue-i18n'
import { jumpMP, redirectTo, goBackPage, useEventReceiver, actionDebounce, toPage } from '@/utils/mpHelper'
import { useGlobalStore } from '@/store/global'
import { TrackType } from '@/dataReport/tracks'
import type { DemoProgramLoadType } from '@/demo/Dishwasher/data'
import { cloneDeep } from 'lodash'
import type { DishwasherController } from '@/controller/Dishwasher/definition'
import { loadFileModule } from '@/controller/demo/utils'
import { DishwasherProgramDownload } from '@/constants/UniEventKeys'

const i18n = useI18n()
const globalStore = useGlobalStore()

const headerStyle = {
  backgroundColor: '#fff',
}
const BABYCARE = 'Dishcare.Dishwasher.Program.BabyCare'

let language = 'zh'
let imgUrl_Assets = netconfig.ASSETS_IMGURL

let loading = 0
let timer: any | null = null

const haId = ref('')
const brand = ref('')
const type = ref('')
const vib = ref('')

let isVirtual = ref(false)

const downProgramsDetail = ref(false)
const scrollTop = ref(0)
const curIdx = ref(0)
const programs = ref<DishwasherDownPrograms[]>([])
const currentName = ref('')
const currentSourceId = ref('')
const shortDescriptionTitle = ref('')
const shortDescriptionItems = ref<string[]>([])
const technicalDataFlag = ref(false)
const currentStatus = ref(-1)
const currentFeatureKey = ref('')
const temperatureMax = ref('')
const runtimeTotal = ref('')
const consumptionWater = ref('')
const consumptionEnergy = ref('')
const isGressClauseFlag = ref(false)
const imgUrL = ref('')
const deleteProgramDiag = ref(false)
const isFromOtherApp = ref(false)

const tempDemoProgramLoadList = ref<DemoProgramLoadType[]>([])
const currentPrograms = ref<DemoProgramLoadType>()

const control = ref<DishwasherController.Control | null>(null)
useEventReceiver('control', (received: DishwasherController.Control) => {
  control.value = received
})

onLoad((query) => {
  haId.value = query?.haId
  vib.value = query?.vib
  brand.value = (query?.brand as string).toUpperCase()
  type.value = query?.type
  isVirtual.value = query?.isVirtual === 'true'
  getDownPrograms()
})

onShow(() => {
  /**
   * 西门子小程序跳转回来
   */
  if (
    globalStore.launchOptions &&
    globalStore.launchOptions.referrerInfo &&
    globalStore.launchOptions.referrerInfo.appId
  ) {
    isFromOtherApp.value = true
    getProgramsDetailData(currentFeatureKey.value)
  }
})

/**
 * 获取程序列表
 */
async function getDownPrograms() {
  if (isVirtual.value) {
    const { DemoProgramLoadList } = await loadFileModule<{ DemoProgramLoadList: DemoProgramLoadType[] }>(
      '/demo/Dishwasher/data'
    )
    tempDemoProgramLoadList.value = cloneDeep(DemoProgramLoadList)
  } else {
    uni.showLoading({
      title: i18n.t('APP.Common.Loading.Text'),
      mask: true,
    })
    try {
      const res = await getDownloadablePrograms(haId.value)
      programs.value = res.data
      uni.hideLoading()
    } catch (error) {
      uni.hideLoading()
    }
  }
}
/**
 * 选择程序
 * @param item
 * @param index
 */
function chooseProgram(item: DishwasherDownPrograms, index: number) {
  if (isVirtual.value) {
    currentPrograms.value = tempDemoProgramLoadList.value[index]
    let { baseData, technicalData } = currentPrograms.value.detail
    imgUrL.value = currentPrograms.value.defaultUrl
    currentStatus.value = currentPrograms.value.status
    shortDescriptionTitle.value = baseData.title[0]
    shortDescriptionItems.value = baseData.items
    technicalDataFlag.value = true
    consumptionEnergy.value = (technicalData['Consumption.Energy'] / 1000).toFixed(1) + ''
    consumptionWater.value = (technicalData['Consumption.Water'] / 1000).toFixed(1) + ''
    runtimeTotal.value = formatMinute(technicalData['Runtime.Total'] + '') + ''
    temperatureMax.value = technicalData['Temperature.Washing.Max'] + ''
  } else {
    loading = 0
    uni.showLoading({
      title: i18n.t('APP.Common.Loading.Text'),
      mask: true,
    })
    getProgramsDetailData(item.featureKey)
    getProgramsTechnicalData(item.featureKey)
  }
  downProgramsDetail.value = true
  currentName.value = language == 'en' ? item.title : item.name
  currentSourceId.value = item.sourceId
  currentFeatureKey.value = item.featureKey
  isGressClauseFlag.value = false
  scrollTop.value = 0
}
/**
 * 获取程序详情数据
 * @param programKey
 */
async function getProgramsDetailData(programKey: string) {
  try {
    const res = await getDownloadableProgramsDetail(haId.value, programKey)
    let dataDetail = res.data
    if (dataDetail) {
      imgUrL.value = dataDetail.medias.standardImage.defaultUrl ? dataDetail.medias.standardImage.defaultUrl : ''
      shortDescriptionTitle.value =
        dataDetail.shortDescription.title.length > 0 ? dataDetail.shortDescription.title[0] : ''
      shortDescriptionItems.value = dataDetail.shortDescription.items ? dataDetail.shortDescription.items : []
      currentStatus.value = dataDetail.status
    } else {
      imgUrL.value = ''
      shortDescriptionTitle.value = ''
      shortDescriptionItems.value = []
    }
    loading++
    if (loading == 2) {
      uni.hideLoading()
    }
  } catch (error) {
    uni.hideLoading()
  }
}
/**
 * 获取程序技术数据
 * @param programKey
 */
async function getProgramsTechnicalData(programKey: string) {
  try {
    const res = await getProgramMetadata(haId.value, programKey, {
      parameters: [],
      useDefaultSettings: true,
    })
    let technicalData = res.data.data.metadata.data
    if (technicalData) {
      technicalDataFlag.value = true
      consumptionEnergy.value =
        technicalData['Consumption.Energy'] != 0 ? (technicalData['Consumption.Energy'] / 1000).toFixed(1) : '0'
      consumptionWater.value =
        technicalData['Consumption.Water'] != 0 ? (technicalData['Consumption.Water'] / 1000).toFixed(1) : '0'
      runtimeTotal.value = technicalData['Runtime.Total'] != 0 ? formatMinute(technicalData['Runtime.Total'] + '') : '0'
      temperatureMax.value =
        technicalData['Temperature.Washing.Max'] != 0 ? technicalData['Temperature.Washing.Max'] + '' : '0'
    } else {
      technicalDataFlag.value = false
    }
    loading++
    if (loading == 2) {
      uni.hideLoading()
    }
  } catch (error) {
    uni.hideLoading()
    technicalDataFlag.value = false
  }
}
/**
 * 是否同意条款
 */
function changeGressClause() {
  isGressClauseFlag.value = !isGressClauseFlag.value
}
/**
 * 查看条款
 */
const seeClause = actionDebounce({
  showLoading: true,
  call: async () => {
    uni.downloadFile({
      url: 'https://s3.cn-north-1.amazonaws.com.cn/rgc-solution-server-validation/WX_HC_Program/Documents/Program_Download/ProgramDownload.pdf',
      success: function (res) {
        uni.hideLoading()
        const filePath = res.tempFilePath
        uni.openDocument({
          filePath,
          success: function (res) {},
        })
      },
      fail: function (error) {
        uni.showToast({
          title: error.errMsg,
        })
      },
    })
  },
})

/**
 * 下载程序
 */
const downloadProgramFun = actionDebounce({
  call: async () => {
    if (!isGressClauseFlag.value) {
      uni.showToast({
        title: '请先同意《晶御智能小程序提供数字化服务一般条款》',
        icon: 'none',
      })
      return
    }
    currentStatus.value = 3
    if (isVirtual.value) {
      let findIndex = tempDemoProgramLoadList.value.findIndex((item) => item.sourceId === currentSourceId.value)
      setTimeout(() => {
        tempDemoProgramLoadList.value[findIndex].status = 2
        currentStatus.value = 2
        uni.showToast({
          title: i18n.t('APP.Common.DownloadSuccess.Text'),
          icon: 'success',
        })
      }, 3000)
    } else {
      const res = await downloadProgram(haId.value, currentSourceId.value)
      clearInterval(timer)
      let countTimes = 0
      timer = setInterval(() => {
        countTimes++
        checkDownloadProgress()
        if (countTimes >= 9) {
          clearInterval(timer)
          countTimes = 0
          uni.hideLoading()
          uni.showToast({
            title: i18n.t('APP.Common.DownloadFail.Text'),
            icon: 'error',
          })
        }
      }, 1000)
    }
  },
})

/**
 * 点击删除
 */
function deleteBtn(value: boolean) {
  deleteProgramDiag.value = value
} /**
/**
 * 删除下载程序
 */
const deleteProgram = actionDebounce({
  loadingText: i18n.t('APP.Common.Deleting.Text'),
  call: async () => {
    deleteProgramDiag.value = false
    if (isVirtual.value) {
      let findIndex = tempDemoProgramLoadList.value.findIndex((item) => item.sourceId === currentSourceId.value)
      await new Promise<void>((resolve) => {
        setTimeout(() => {
          tempDemoProgramLoadList.value[findIndex].status = 1
          currentStatus.value = 1
          resolve()
          nextTick(() => {
            uni.showToast({
              title: i18n.t('APP.Common.DeleteSucess.Text'),
              icon: 'success',
            })
          })
        }, 3000)
      })
    } else {
      await new Promise<void>(async (resolve, reject) => {
        await delDownloadProgram(haId.value, currentSourceId.value)
        clearInterval(timer)
        let countTimes = 0
        timer = setInterval(async () => {
          countTimes++
          // 查询删除进度
          const res = await getSingleProgramsAddEd(haId.value, currentSourceId.value)
          const { installationState } = res.data
          // 删除失败
          if (installationState === 'REMOVED') {
            let favoriteProgramsSui = control.value?.store.favoriteProgramsSui
            if (favoriteProgramsSui && favoriteProgramsSui?.length > 0) {
              favoriteProgramsSui.forEach((item) => {
                if (item.value.length > 0 && item.value[0].key === currentFeatureKey.value) {
                  item.value = []
                }
              })
            }
            currentStatus.value = 1
            clearInterval(timer)
            resolve()
            uni.showToast({
              title: i18n.t('APP.Common.DeleteSucess.Text'),
              icon: 'success',
            })
            // 删除中
          } else if (installationState === 'INSTALL') {
            currentStatus.value = 3
          }
          // 删除失败
          if (countTimes >= 9) {
            clearInterval(timer)
            countTimes = 0
            reject()
            uni.showToast({
              title: i18n.t('APP.Common.DeleteFail.Text'),
              icon: 'error',
            })
          }
        }, 1000)
      })
    }
  },
})

/**
 * 查询下载程序进度
 */
async function checkDownloadProgress() {
  try {
    const res = await getSingleProgramsAddEd(haId.value, currentSourceId.value)
    const { installationState } = res.data
    if (installationState === 'INSTALLED') {
      setTimeout(() => {
        control.value?.remote.loadAllSetting()
      }, 500)

      currentStatus.value = 2
      uni.showToast({
        title: i18n.t('APP.Common.DownloadSuccess.Text'),
        icon: 'success',
      })
      clearInterval(timer)
    } else if (installationState === 'INSTALL') {
      currentStatus.value = 3
    }
  } catch (error) {
    uni.hideLoading()
  }
}
/**
 * 返回
 */
const onReset = actionDebounce({
  call: async () => {
    if (downProgramsDetail.value) {
      if (!isVirtual.value) getDownPrograms()
      downProgramsDetail.value = false
      currentName.value = ''
      currentFeatureKey.value = ''
      currentSourceId.value = ''
    } else {
      uni.navigateBack({})
    }
  },
})
/**
 * 计算时间
 * @param value
 */
function formatMinute(value: string) {
  var secondTime = parseInt(value) // 秒
  var minuteTime = 0 // 分
  let result = ''
  if (secondTime > 59) {
    minuteTime = secondTime / 60
    secondTime = secondTime % 60
  }
  if (minuteTime > 0) {
    let minuteTimeString = '' + minuteTime
    if (minuteTimeString.indexOf('.') != -1) {
      result = minuteTimeString.split('.')[0]
    } else {
      result = minuteTimeString
    }
  }
  result = secondTime > 30 ? parseInt(result) + 1 + '' : result
  return result
}
/**
 * 跳转参数调节页面
 */
const gotoStart = actionDebounce({
  loadingText: i18n.t('APP.Common.Jumping.Text'),
  call: async () => {
    if (isVirtual.value) {
      await control.value?.store.setCurrentProgram(currentPrograms.value?.featureKey as string)
      uni.$emit(DishwasherProgramDownload)
      await new Promise<void>((resolve) => {
        setTimeout(async () => {
          resolve()
          nextTick(async () => {
            await goBackPage({ delta: 1 })
          })
        }, 2000)
      })
    } else {
      await selectProgram(haId.value, currentFeatureKey.value)
      uni.$emit(DishwasherProgramDownload)
      await new Promise<void>((resolve) => {
        setTimeout(async () => {
          resolve()
          nextTick(async () => {
            if (!isFromOtherApp.value) {
              await goBackPage({ delta: 1 })
            }
          })
        }, 2000)
      })
    }
  },
})
/**
 * 去购买
 */
function goBuy() {
  jumpMP(
    'wx00e2750add150103',
    `/pages/integralShop/goodsDetailsCash/main?id=1033&utm_source=HC&utm_medium=babycare&haId=${haId.value}`,
    {},
    'Appliance.DishWasher.Buy.BabyCare'
  )
}
</script>
<style scoped lang="less">
.programs-box {
  overflow: hidden;
  font-family: 'PingFang SC';
  font-style: normal;
  .disabled {
    opacity: 0.6;
    pointer-events: none;
  }
  // baby care 购买卡片入口
  .baby-care-card {
    height: 142rpx;
    background-color: #f4f4f6;
    padding: 16rpx 24rpx 16rpx 16rpx;
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-top: 16rpx;
    box-sizing: border-box;
    .left {
      display: flex;
      .card-img {
        width: 110rpx;
        height: 110rpx;
        background-color: #d9d9d9;
        margin-right: 16rpx;
      }
      .cont-card {
        display: flex;
        flex-direction: column;
        justify-content: center;
        .card-name {
          font-weight: 500;
          font-size: 28rpx;
          color: var(--dark-color);
        }
      }
    }
    .card-btn {
      font-weight: 500;
      font-size: 32rpx;
      color: var(--primary-color);
    }
  }
  .programsList {
    padding: 0 32rpx;
    margin-top: 40rpx;
  }

  .scrolView {
    position: relative;
    top: 0;
    width: 100%;
    height: 100%;
    justify-content: baseline;
  }

  .program-title {
    font-weight: 600;
    font-size: 48rpx;
    line-height: 68rpx;
    color: var(--dark-color);
  }

  .btnItem {
    height: 152rpx;
    background-color: #f4f4f6;
    position: relative;
    z-index: 99;
    color: var(--dark-color);
    font-size: 36rpx;
    font-weight: 600;
    display: flex;
    align-items: center;
    text-align: left;
    margin-top: 24rpx;
    box-sizing: border-box;
    padding-left: 32rpx;
    box-sizing: border-box;
  }
  .btnItem:nth-of-type(3n) {
    margin-right: 0;
  }

  .babyWash {
    width: 86rpx;
    height: 50rpx;
    line-height: 50rpx;
    background: linear-gradient(135deg, #567cd3 0%, #bf5eff 100%);
    border-radius: 16px 0px 16px 0px;
    position: absolute;
    top: 0;
    left: 0;
    font-size: 24rpx;
    font-weight: 500;
    color: #ffffff;
    text-align: center;
  }

  .downFinishedIcon {
    width: 62rpx;
    height: 44rpx;
    background: #41c38c;
    border-radius: 200rpx 0px 160rpx 0px;
    position: absolute;
    bottom: 0;
    right: 0;
    z-index: 9;
    text-align: center;
    line-height: 44rpx;
  }

  .icDoneImg {
    width: 28rpx;
    height: 28rpx;
  }

  .down {
    width: 200rpx;
    height: 40rpx;
    line-height: 40rpx;
    border-radius: 0rpx 0rpx 32rpx 32rpx;
    position: absolute;
    bottom: 0;
    right: 0;
    left: 0;
    font-size: 24rpx;
    font-weight: 500;
    color: #ffffff;
    text-align: center;
  }

  .downloaded {
    width: 78rpx;
    height: 32rpx;
    font-weight: 500;
    font-size: 20rpx;
    color: #ffffff;
    text-align: center;
    line-height: 32rpx;
    background-color: var(--primary-color);
    position: absolute;
    top: 0;
    left: 0;
  }

  .downFinishing {
    background: #4475d5;
  }

  .downError {
    background: #cf4b4b;
  }

  /* 详情 */
  .downLoadDetailDiv {
    margin: 0 32rpx;
    padding-bottom: 480rpx;
  }

  .remoteSetImg {
    width: 100%;
    height: 404rpx;
    margin-top: 24rpx;
  }

  .program {
    margin-top: 24rpx;
  }

  .washerBomWrapper {
    color: #ffffff;
    position: relative;
  }

  .pageTitleDiv {
    display: flex;
    align-items: center;
  }

  .pageTitle {
    font-size: 48rpx;
  }

  .pageTitle,
  .pageTitleSmall {
    font-weight: 600;
    color: var(--dark-color);
  }

  .pageTitleSmall {
    font-size: 32rpx;
  }

  .downFinished {
    width: 86rpx;
    height: 32rpx;
    line-height: 32rpx;
    background: var(--primary-color);
    font-size: 20rpx;
    font-weight: 600;
    color: #ffffff;
    margin-left: 20rpx;
    text-align: center;
  }

  .pageDes {
    margin-top: 16rpx;
  }

  .pageDes view {
    font-size: 32rpx;
    font-weight: 400;
    line-height: 48rpx;
    color: var(--dark-color);
  }

  .technicalData {
    margin-top: 32rpx;
  }

  .careEvent {
    margin-top: 40rpx;
    font-size: 24rpx;
    font-weight: 400;
    color: var(--dark-color);
    line-height: 32rpx;
    opacity: 0.6;
  }

  .btnDiv {
    position: fixed;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 296rpx;
    border-top: 1px solid #e9e9ed;
    background-color: #fff;
  }

  .btnDes {
    width: 100%;
    text-align: center;
    font-size: 28rpx;
    font-weight: 500;
    color: #ffffff;
    line-height: 40rpx;
    padding-top: 32rpx;
  }

  .btn {
    position: absolute;
    bottom: 64px;
    left: 50%;
    transform: translateX(-50%);
    width: 716rpx;
    height: 88rpx;
    line-height: 88rpx;
    text-align: center;
    background-color: var(--dark-color);
    font-size: 32rpx;
    font-weight: 600;
    color: #ffffff;
  }

  .btn-del-box {
    display: flex;
    position: absolute;
    bottom: 64px;
    left: 50%;
    transform: translateX(-50%);
    width: 690rpx;
    height: 88rpx;
    font-size: 32rpx;
    font-weight: 600;
  }
  .bth-del {
    width: 30%;
    text-align: center;
    color: var(--dark-color);
    opacity: 0.6;
    line-height: 88rpx;
  }

  .btn-start {
    width: 70%;
    text-align: center;
    background-color: var(--dark-color);
    color: #ffffff;
    line-height: 88rpx;
  }

  .grey {
    opacity: 0.3;
  }

  .picGrey {
    background: linear-gradient(
      90deg,
      rgba(233, 234, 237, 0.4) 25%,
      rgba(191, 192, 192, 0.4) 37%,
      rgba(233, 234, 237, 0.4) 63%
    );
    animation: loading 1.4s ease infinite;
    background-size: 400% 100%;
  }

  .prudctPictureImg {
    margin-top: 20rpx;
    display: flex;
    justify-content: space-between;
  }

  .prudctPictureImg view {
    width: 310rpx;
    height: 300rpx;
    border-radius: 10px;
  }

  .picImg {
    width: 650rpx;
    height: 400rpx;
    margin-top: 30rpx;
    border-radius: 10px;
  }

  .agreeClaus {
    width: 100%;
    height: 34rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 32rpx;
  }
  .gressClauseDiv {
    width: 46rpx;
    align-items: center;
    display: flex;
  }
  .agreeInput {
    width: 40rpx;
    height: 40rpx;
    border: 1px solid var(--primary-color);
    border-radius: 50%;
    margin-right: 6rpx;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .agreeFont {
    height: 36rpx;
    font-size: 26rpx;
    font-weight: 400;
    color: var(--dark-color);
    line-height: 36rpx;
  }

  .agreeClauseName {
    height: 36rpx;
    font-size: 26rpx;
    font-weight: 400;
    color: var(--primary-color);
    line-height: 36rpx;
  }

  .gressClauseImage {
    width: 24rpx;
    height: 24rpx;
    background-color: var(--primary-color);
    border-radius: 50%;
  }

  .prudctImgSmall {
    width: 310rpx;
    height: 300rpx;
    border-radius: 20rpx;
  }

  .prudctImgBig {
    width: 100%;
    border-radius: 20rpx;
    margin-top: 30rpx;
  }

  .prudctImgBig1 {
    height: 608rpx;
  }

  .prudctImgBig2 {
    height: 560rpx;
  }

  .prudctImgBig3 {
    height: 880rpx;
  }

  .prudctImgBig4 {
    height: 980rpx;
  }

  .calendarDayTip {
    position: absolute;
    left: 3%;
    top: -46rpx;
    box-sizing: border-box;
    font-size: 24rpx;
    text-align: center;
    height: 36rpx;
    line-height: 36rpx;
    color: #fff;
    z-index: 2;
  }

  .calendarDayTipTria {
    position: absolute;
    left: 6%;
    bottom: -28rpx;
    transform: rotate(180deg);
    border-bottom: 10rpx solid #4475d5;
    width: 30rpx;
    height: 10rpx;
    border-top: none;
    border-left: 15rpx solid transparent;
    border-right: 15rpx solid transparent;
    border-bottom: 10rpx solid rgba(68, 117, 213, 0.8);
    box-sizing: border-box;
  }

  .calendarDayTipText {
    padding: 8rpx;
    border-radius: 8rpx;
    white-space: nowrap;
    background: #4475d5;
    border: 1px solid #4475d5;
  }
}
</style>
